<template>
	<view class="top-bar" 
		:style="style"
	>
		<view class="top-bar__warp" 
			:style="warpStyle"
		>
			<slot name="left"></slot>
			<slot name="center"></slot>
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue'

const menuButtonInfoRef = ref(null)
const paddingTopRef = ref(0)
const navBarHeightRef = ref(0)

// #ifndef H5 || APP-PLUS || MP-ALIPAY
menuButtonInfoRef.value = uni.getMenuButtonBoundingClientRect()
paddingTopRef.value = menuButtonInfoRef.value.top
navBarHeightRef.value = menuButtonInfoRef.value.height
// #endif

const style = computed(() => {
	return {
		...(paddingTopRef.value ? {'padding-top': paddingTopRef.value + 'px'} : {})
	}
})

const warpStyle = computed(() => {
	return {
		...(navBarHeightRef.value ? {'height': navBarHeightRef.value + 'px'} : {})
	}
})
</script>

<style lang="less" scoped>
	@import './style/index.less';
</style>